<script lang="ts" setup>
import { ref, withDefaults, watch, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { clone } from "@pureadmin/utils";
import { genFileId } from 'element-plus'
import type { UploadProps, UploadUserFile, UploadInstance, UploadRawFile } from 'element-plus'
import { getStorage } from '@/utils/storage'
import { getPicImg, geturlneeddl, uploadUrl } from '@/api/upload'
import { selfiletypepage } from '@/api/technology.ts'


interface Technical {
  gs: string
  level: number
  linkid: string
  lx: string
  name: string
  createTime: string
  infotype: number
  zdywzid: string
}

interface optionItem {
  name: string
  id: number
}

interface Props {
  searchList: optionItem[]
  modelValue: Technical
  itemIndex: number | string
}

const props = withDefaults(defineProps<Props>(), {
  searchList: () => [],
  modelValue: () => ({ gs: '', level: 0, linkid: '', lx: '', name: '', createTime: '', infotype: 0, zdywzid: '' }),
  itemIndex: 0
})


console.log(props.itemIndex, 'props.index')
const fileList = ref<UploadUserFile[]>([])

const selfiletypeOptions = ref([])
selfiletypepage().then(res => {
  selfiletypeOptions.value = res.result
})



onMounted(() => {
  const imgList = props.modelValue.linkid ? {
    name: props.modelValue.name,
    linkid: props.modelValue.linkid,
    url: getPicImg(props.modelValue.linkid)
  } : ''
  if (imgList) {
    console.log(imgList, 'imgList')
    fileList.value = [imgList]
  }
})

const token = getStorage('token')

const emits = defineEmits(["update:modelValue", "delItemFn"])

const upload = ref(null)

const temporary = clone(props.modelValue, true);
const fileTechnicalForm = ref(temporary);

// const handleChange = (icon) => {
//   emit("update:fileTechnical", icon)
// }

const delItem = () => emits("delItemFn", props.itemIndex)

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  if (uploadFile.url) {
    return window.open(uploadFile.url)
  } else {
    let url = uploadFile?.response?.data?.result[0].uuid
    return window.open(geturlneeddl(url))
  }
}

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `确定要移除 ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}


watch(fileList, newValue => {
  if (newValue.length > 0) {
    fileTechnicalForm.value.linkid = newValue[0]?.response?.data?.result[0].uuid ?? fileTechnicalForm.value.linkid
    fileTechnicalForm.value.name = newValue[0]?.name
  } else {
    fileTechnicalForm.value.linkid = ''
    fileTechnicalForm.value.name = ''
  }
}, {
  deep: true
});


watch(fileTechnicalForm, newValue => emits("update:modelValue", newValue)
  , {
    deep: true
  });


</script>

<template>
  <el-row class="w-full" :gutter="20">

    <el-col :span="4">
      <!-- <el-input v-model="fileTechnicalForm.lx" autocomplete="off" placeholder="请输入类型" /> -->

      <!--  -->
      <el-radio-group v-model="fileTechnicalForm.infotype">
        <el-radio :label="0">文档</el-radio>
        <el-radio :label="1">文章</el-radio>
      </el-radio-group>

    </el-col>

    <el-col :span="3">
      <!-- <el-input v-model="fileTechnicalForm.lx" autocomplete="off" placeholder="请输入类型" /> -->

      <el-select v-model="fileTechnicalForm.lx" placeholder="请选择类型">
        <el-option v-for="item in selfiletypeOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

    </el-col>
    <el-col :span="6">


      <template v-if="fileTechnicalForm.infotype == 0">
        <el-upload ref="upload" v-model:file-list="fileList" :headers="{
          token
        }" :auto-upload="true" :data="{ ispic: '1' }" name="fileUpload" :action="uploadUrl" :limit="1" multiple
          :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :on-exceed="handleExceed">
          <el-button type="primary" class="w-full" v-if="fileList.length === 0">选择文件</el-button>
        </el-upload>
      </template>

      <template v-else>
        <el-input v-model="fileTechnicalForm.zdywzid" autocomplete="off" placeholder="请输入我文章ID" />
      </template>





    </el-col>
    <el-col :span="4">
      <el-select style="width: 100%" v-model="fileTechnicalForm.level" placeholder="请选择">
        <el-option v-for="option in searchList" :key="option.id" :label="option.name" :value="option.id" />
      </el-select>
    </el-col>
    <el-col :span="4">
      <el-date-picker v-model="fileTechnicalForm.createTime" placeholder="请选择时间" format="YYYY-MM-DD"
        value-format="YYYY-MM-DD" />
    </el-col>
    <el-col :span="3">
      <!-- 删除 -->
      <div class="flex justify-center items-center h-full">
        <img class="w-[24px] h-[24px] cursor-pointer" @click="delItem" src="../../../assets/product/del.png" alt="">
      </div>
    </el-col>
  </el-row>
</template>

<style  scoped>
:deep(.el-upload-list) {
  margin-top: -32px !important;
}
</style>
